window.addEventListener('load', function(){
    var previewImg = document.querySelector('.preview-img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    previewImg.addEventListener('mouseover', function(){
        mask.style.display = 'block';
        big.style.display = 'block'
    })
    previewImg.addEventListener('mouseout', function(){
        mask.style.display = 'none';
        big.style.display = 'none'
    })

    // 2. 让黄色盒子跟着鼠标走
    // 计算出鼠标在盒子内的距离
    // 鼠标需要在黄色盒子最中央 只需要让盒子往上走自身的一半和往左走自身的一半即可
    // 3. 需要将黄色盒子限制在img大盒子里 需要
    // 控制mask的top的坐标 左边不能超过 0 上不能超过 0 往右不能超过父亲减黄色盒子的差 往下同
    previewImg.addEventListener('mousemove', function(e){
        // 这个算出来是鼠标在盒子里的坐标
        var x = e.pageX - previewImg.offsetLeft;
        var y = e.pageY - previewImg.offsetTop;
        // 将鼠标放到黄色盒子中间
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 限制黄色盒子的移动距离
        // if(maskX < 0) {
        //     maskX = 0;
        // }
        // 盒子是正方形的 计算出父子盒子之间的距离 代替固定数值
        var mMDistance = previewImg.offsetWidth - mask.offsetWidth;
        // 限制左右
        maskX = maskX< 0 ? maskX = 0 : maskX;
        maskX = maskX > mMDistance ? maskX = mMDistance : maskX;
        //限制上下
        maskY = maskY< 0 ? maskY = 0 : maskY;
        maskY = maskY > mMDistance ? maskY = mMDistance : maskY;
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 4.黄色盒子移动 大图片的盒子跟着移动
        // 先计算出他们的大小与移动距离比例 300/100=3.33
        // 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离 = 大图片等比例移动距离
        //大图片最大移动距离 
        var bigImg = document.querySelector('.big-img');
        var BMdistance = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * BMdistance / mMDistance;
        var bigY = maskY * BMdistance / mMDistance;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})